xui.Class("xui.UI.StatusButtons", ["xui.UI.List"], {
    Initialize: function () {
        //modify default template fro shell
        var t = this.getTemplate();

        t.className = '{_className}';
        t.ITEMS.className = '{_bordertype {_align} }';
        t.$submap = {
            items: {
                ITEM: {
                    className: '{_itemClass} {itemClass} {disabled} {readonly} ',
                    style: '{itemPadding};{itemMargin};{itemWidth};{itemAlign};{itemStyle};{_display} {_itemColor}',
                    tabindex: '{_tabindex}',
                    ICON: {
                        $order: 10,
                        className: 'xuicon {imageClass} {picClass}',
                        style: '{backgroundImage}{backgroundPosition}{backgroundSize}{backgroundRepeat}{iconFontSize}{imageDisplay}{iconStyle}{_iconColor}',
                        text: '{iconFontCode}'
                    },
                    CAPTION: {
                        $order: 11,
                        style: '{_fontColor}',
                        text: '{caption}'
                    },
                    DROP: {
                        $order: 12,
                        className: 'xuifont',
                        $fonticon: 'xui-uicmd-arrowdrop',
                        style: '{_dropDisplay}'
                    },
                    FLAG: {
                        $order: 13,
                        className: 'xui-display-none {flagClass}',
                        style: '{_flagStyle};{flagStyle}',
                        text: '{flagText}'
                    }
                }
            }
        };
        this.setTemplate(t);
    },
    Static: {
        Appearances: {
            ITEMS: {
                position: 'relative',
                overflow: 'visible',
                'text-align': 'center'
            },
            ITEM: {
                'vertical-align': 'middle',
                position: 'relative',
                //  padding: '.5em',
                margin: '.166667em',
                cursor: 'pointer',
                'white-space': 'nowrap'
            },
            'ITEM-hover, ITEM-active, ITEM-checked': {},
            'ITEM-hover': {},
            'ITEM-active': {},
            'ITEM-checked': {},
            CAPTION: {
                display: xui.$inlineBlock,
                zoom: xui.browser.ie6 ? 1 : null,
                'vertical-align': 'middle',
                margin: "0 0.8em 0 0.3em",
                'font-size': '1.2em'
            },
            DROP: {
                'vertical-align': 'middle'
            },
            FLAG: {
                top: '-.5em',
                right: '-.5em',
                position: 'absolute',
                'z-index': 10
            }
        },
        DataModel: ({
            expression: {
                ini: '',
                action: function () {
                }
            },
            menuType: {
                ini: 'BOTTOMBAR'
            },
            iconColors: null,
            itemColors: null,
            fontColors: null,
            expression: {
                ini: '',
                action: function () {
                }
            },
            autoFontColor: {
                ini: false,
                action: function () {
                    this.boxing().refresh();
                }
            },
            autoIconColor: {
                ini: false,
                action: function () {
                    this.boxing().refresh();
                }
            },
            autoItemColor: {
                ini: true,
                action: function () {
                    this.boxing().refresh();
                }
            },
            maxHeight: null,
            tagCmds: null,
            height: 'auto',
            align: {
                ini: "",
                listbox: ['', 'left', 'center', 'right'],
                action: function (value) {
                    this.getSubNode('ITEMS', true).css('text-align', value);
                }
            },

            itemMargin: {
                ini: "",
                action: function (value) {
                    this.getSubNode('ITEM', true).css('margin', v);
                }
            },
            itemPadding: {
                ini: "",
                action: function (v) {
                    this.getSubNode('ITEM', true).css('padding', v);
                }
            },
            itemWidth: {
                $spaceunit: 1,
                ini: "auto",
                action: function (v) {
                    this.getSubNode('ITEM', true).width(v || 'auto');
                }
            },
            itemAlign: {
                ini: "",
                listbox: ['', 'left', 'center', 'right'],
                action: function (value) {
                    this.getSubNode('ITEM', true).css('text-align', value);
                }
            },

            itemType: {
                ini: "button",
                listbox: ['text', 'button', 'dropButton'],
                action: function (value) {
                    this.boxing().refresh();
                }
            },
            connected: {
                ini: false,
                action: function () {
                    this.boxing().refresh();
                }
            }
        }),
        Behaviors: {
            DroppableKeys: ["ITEMS"]
        },
        EventHandlers: {
            onCmd: null
        },

        _prepareData: function (profile) {
            var data = arguments.callee.upper.call(this, profile), t, v;
            var p = profile.properties, ns = this;
            xui.arr.each(data.items, function (item) {
                if (!item.index) {
                    item.index = xui.arr.indexOf(data.items, item);
                }
                ns._autoColor(item, item.index, p);
            })
            return data;
        },

        _initIconColors: function (type, p) {
            var colors = [],
                iconColors = ["#E6945C", "#46C37B", "#195ead", "#9E8CE0", "#1f8d9b", "#87CEEB", "#e04d7f"],
                fontColors = ["#E6945C", "#46C37B", "#195ead", "#9E8CE0", "#1f8d9b", "#87CEEB", "#e04d7f"],
                itemColors = ["#F19B60", "#49CD81", "#0277bd", "#A693EB", "#42a3af", "#B0E0E6", "#F06292"];

            switch (type) {
                case 'icon':
                    colors = iconColors;
                    if (p.iconColors && p.iconColors.length > 0) {
                        colors = p.iconColors;
                    }
                    break
                case 'font':
                    colors = fontColors;
                    if (p.fontColors && p.fontColors.length > 0) {
                        colors = p.fontColors;
                    }
                    break;
                case 'item':
                    colors = itemColors;
                    if (p.itemColors && p.itemColors.length > 0) {
                        colors = p.itemColors;
                    }
                    break;
            }
            return colors;
        },
        _autoColor: function (item, index, p) {
            index = index || 0;

            if (p.autoFontColor || item.fontColor) {
                var fontColors = this._initIconColors('font', p);
                while (index && index > (fontColors.length - 1)) {
                    index = index - fontColors.length;
                }

                if (!item.fontColor) {
                    item.fontColor = fontColors[index];
                }
                item._fontColor = item.fontColor ? ";color:" + item.fontColor : ''
            }

            if (p.autoIconColor || item.iconColor) {
                var iconColors = this._initIconColors('icon', p);
                while (index && index > (iconColors.length - 1)) {
                    index = index - iconColors.length;
                }
                if (!item.iconColor) {
                    item.iconColor = iconColors[index];
                }
                item._iconColor = item.iconColor ? ";color:" + item.iconColor : '';
            }
            if (p.autoItemColor || item.itemColor) {

                var itemColors = this._initIconColors('item', p);
                while (index && index > (itemColors.length - 1)) {
                    index = index - itemColors.length;
                }
                if (!item.itemColor) {
                    item.itemColor = itemColors[index]
                }
                item._itemColor = item.itemColor ? ";background-color:" + item.itemColor : ''
                item._fontColor = ';color:#ffffff'
                item._iconColor = ';color:#ffffff'
            }
        },

        _prepareItem: function (profile, item, oitem, pid, index, len) {
            var p = profile.properties, t,
                type = item.type || p.itemType;
            item._tabindex = p.tabindex;
            if (p.align) {
                align = "text-align:" + p.align;
            }
            this._autoColor(item, index, p);

            if (p.connected) item.itemMargin = "margin:" + (index === 0 ? "0" : "0 0 0 -1px");
            else if (t = item.itemMargin || p.itemMargin) item.itemMargin = "margin:" + t;

            if (t = item.itemPadding || p.itemPadding) item.itemPadding = "padding:" + t;

            if (t = item.itemWidth || p.itemWidth) item.itemWidth = "width:" + profile.$forceu(t || 'auto');
            if (t = item.itemAlign || p.itemAlign) item.itemAlign = "text-align:" + t;

            if (item.flagText || item.flagClass) item._flagStyle = 'display:block';
            if (!item.flagClass) item.flagClass = 'xui-uiflag-1';
            if (!item.iconFontSize) item.iconFontSize = 'iconFontSize:1.2em';

            item._itemClass = type == "text" ? "xui-node-a"
                : ("xui-ui-btn xui-uibar xui-uigradient " + (p.connected ? (index == 0 ? "xui-uiborder-radius-tl xui-uiborder-radius-bl xui-uiborder-noradius-r"
                    : index === len - 1 ? "xui-uiborder-radius-tr xui-uiborder-radius-br xui-uiborder-noradius-l"
                        : "xui-uiborder-noradius")
                    : "xui-uiborder-radius"));

            item._dropDisplay = type == "dropButton" ? '' : 'display:none';
            item.hidden ? item._display = 'display:none' : '';


        }
    }
});

